<template>
	<view>
		<!-- 蒙版层 -->
		<view class="bg" @tap="$emit('event')"></view>
		<!-- <canvas style="width: 500px;height: 500px;" canvas-id="canvesID"></canvas> -->
		<!-- <view class="posters">
			<view>
				<image src="../../static/img/tabbar/home.png"  style="width: 600rpx;height: 360rpx;" mode="aspectFill"></image>
			</view>
			<view class="innertPoster">
				<view class="left">
					<view>@*******</view>
					<view>时间，会让我们知道……</view>
				</view>
				<view class="right">QRcode</view>
			</view>
		</view> -->
		
		<view class="cont">
			<view class="shareContent">
				<view class="poster">
					<i class="iconfont iconqingkong" @click="closeFunc"></i>
					<l-painter :board="base" ref="painter" width="600rpx" height="560rpx" isH5PathToBase64
						isRenderImage @success="path = $event" />
					<view class="tips">
						<view class="tips-left" @click="saveImage">保存图片<br />到手机相册</view>
						<i class="iconfont iconxiayibu-copy"></i>
						<view class="tips-right">打开智助教育<br />右上角扫一扫</view>
					</view>
				</view>
			</view>
			<!-- <view class="shareBottom">
				<view class="bottomTitle">分享到</view>
				<view class="bottomIcons">
					<view class="bottomIcon" @click="shareWechat">
						<i class="iconfont iconweixin"></i>
						<text>微信</text>
					</view>
					<view class="bottomIcon" @click="saveImage">
						<i class="iconfont iconxiazai"></i>
						<text>下载保存</text>
					</view>
				</view>
				<view class="bottomCancel" @click="closeFunc">取消</view>
			</view> -->
		</view>
		
		
		<view class="bottomShare">
			<view class="shareTop">
				分享到
			</view>
			<view class="wx">
				<view class="wx2">
					<image src="../../static/img/wx.png" class="img"></image>
					<view class="wx3">微信</view>
				</view>
				<view class="wx2">
					<image src="../../static/img/down.png" class="img"></image>
					<view class="wx3">保存</view>
				</view>
			</view>
			<view class="closeToast" @tap="$emit('event')">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/';
	export default {
		components: {
			lPainter
		},
		created() {
			this.imagesPath()
			console.log('base',this.base);
			console.log('images',this.images);
		},
		data() {
			return {
				posterToast:false,
				path: '',
				base: {
					width: '600rpx',
					height: '560rpx',
					background: '#FFFFFF',
					radius: '10rpx 10rpx 0 0',
					views: [{
						type: 'image',
						src: 'http://files.zhizhuedu.cn/1617876632788_Screenshot_2021-04-06-07-53-37-571_com.miHoYo.Yuanshen.jpg',
						css: {
							left: '0rpx',
							top: '0rpx',
							width: '600rpx',
							height: '360rpx',
							mode: 'aspectFill',
							background: 'transparent',
							radius: '10rpx 10rpx 0 0'
						}
					}, {
						type: 'view',
						css: {
							left: '40rpx',
							textAlign: 'left',
							width: '300rpx'
						},
						views: [{
							type: 'text',
							text: '@树懒懒',
							css: {
								top: '400rpx',
								display: 'block',
								fontSize: '30rpx',
								lineHeight: '40rpx',
								color: '#333333',
								maxLines: 1
							}
						}, {
							type: 'text',
							text: '时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……',
							css: {
								top: '430rpx',
								fontSize: '22rpx',
								lineHeight: '30rpx',
								color: '#999999',
								maxLines: 2
							}
						}]
					}, {
						type: 'qrcode',
						text: 'https://www.baidu.com',
						css: {
							left: '440rpx',
							top: '400rpx',
							width: '120rpx',
							height: '120rpx',
							color: '#000000',
							backgroundColor: '#FFFFFF'
						}
					}]
				}
			}
		},
		onReady() {
			
		},
		methods: {
			imagesPath(){
				this.base.views[0].src = this.images
			}
		},
		props:{
			images: {
				type: String ,
				default: ''
			},
		}
	}
</script>

<style lang="scss">
	.bg{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 1000;
	}
	
	.bottomShare{
		top: 80vh;
		position: fixed;
		width: 47vh;
		height: 40vh;
		z-index: 9999;
		background-color: #FFFFFF;
		
		.shareTop{
			text-align: center;
			font-size: 28rpx;
			margin-top: 20rpx;
			margin-bottom: 24rpx;
		}
		
		.wx{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		
		.wx2{
			display: flex;
			flex-direction: column;
			text-align: center;
		}
		
		.wx3{
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		
		.img{
			width: 90rpx;
			height: 90rpx;
		}
		
		.closeToast{
			font-size: 32rpx;
			text-align: center;
			margin-top: 20px;
		}
	}
	
	.posters{
		position: fixed;
		width: 600rpx;
		height: 720rpx;
		background-color: #09BB07;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 10upx;
		z-index: 9999;
	}
	
	.innertPoster{
		height: 202rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.left{
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;
			
			view:nth-child(1){
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}
			
			view:nth-child(2){
				font-size: 20rpx;
				color: #999999;
				margin-top: 15rpx;
			}
		}
		
		.right{
			margin-right: 40rpx;
		}
	}
	
	.contView {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: hidden;
	}
	
	.cont {
		background: #DCDFE6;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1250upx;
		z-index: 9999;
	}
	
	.shareContent {
		width: 100%;
		height: 890upx;
		position: absolute;
		bottom: 320upx;
		left: 0;
	}
	
	.poster {
		width: 100%;
		position: absolute;
		bottom: 80upx;
	}
	
	.iconqingkong {
		color: #F4F7FC;
		font-size: 40upx;
		position: absolute;
		right: 30upx;
		top: -60upx;
	}
	
	uni-canvas {
		margin: auto;
	}
	
	.tips {
		width: 600upx;
		height: 160upx;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #F7F7F7;
		color: rgba(51, 51, 51, 0.8);
		font-size: 26upx;
	}
	
	.tips i {
		color: #D8D8DA;
		font-size: 50upx;
	}
	
	.shareBottom {
		width: 100%;
		height: 320upx;
		background: #FFFFFF;
		border-radius: 10upx 10upx 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.bottomTitle {
		color: #333333;
		font-size: 30upx;
		padding: 20upx 0;
		text-align: center;
	}
	
	.bottomIcons {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.bottomIcon {
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		height: 150upx;
	}
	
	.bottomIcon .iconfont {
		color: #FFFFFF;
		width: 90upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		margin-bottom: 20upx;
		border-radius: 50%;
	}
	
	.iconweixin {
		font-size: 56upx;
		background: #0FCB55;
	}
	
	.iconxiazai {
		font-size: 40upx;
		background: #FF9900;
	}
	
	.bottomCancel {
		color: #333333;
		font-size: 34upx;
		text-align: center;
		position: absolute;
		bottom: 30upx;
		width: 100%;
	}
</style>
